<template>
  <div v-loading="loading" class="app-container">
    <el-form :model="info" label-width="110px">
      <div class="header_title_box">
        <h2>订单信息</h2>
      </div>
      <div class="select_form_box">
        <el-row :gutter="36">
          <el-col :span="6" :offset="0">
            <el-form-item label="订单编号">
              <el-input v-model="info.platform_no" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="订单编号2">
              <el-input v-model="info.platform_no_ext" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="平台">
              <el-input v-model="info.platform" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <!-- <el-form-item label="店铺">
              <el-input
                :value="info.shop.shop_name"
                :disabled="true"
              />
            </el-form-item> -->
          </el-col>
        </el-row>

        <el-row :gutter="36">
          <el-col :span="6" :offset="0">
            <el-form-item label="订单状态">
              <el-input :value="info.status | dicValue('status')" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="备注">
              <el-input v-model="info.remark" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="公司">
              <el-input :value="info.shipping_name" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="总金额">
              <el-input :value="info.total_price | toThousandFilter" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="36">
          <el-col :span="6" :offset="0">
            <el-form-item label="总个数">
              <el-input :value="info.total_num" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="生成时间">
              <el-input value="" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="付款时间">
              <el-input v-model="info.paid_at" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="订单拉取时间">
              <el-input :value="info.get_at" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="36">
          <el-col :span="6" :offset="0">
            <el-form-item label="发货时间">
              <el-input :value="info.shipped_at" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="创建人">
              <el-input v-model="info.created_by_name" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="创建时间">
              <el-input v-model="info.created_at" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="修改人">
              <el-input :value="info.updated_by_name" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="36">
          <el-col :span="6" :offset="0">
            <el-form-item label="修改时间">
              <el-input :value="info.updated_at" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

      </div>
      <div class="header_title_box">
        <h2>收货人信息</h2>
      </div>
      <div class="select_form_box">
        <el-row :gutter="36">
          <el-col :span="6" :offset="0">
            <el-form-item label="买家姓名">
              <el-input :value="info.buyer.address_name" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="买家邮箱">
              <el-input v-model="info.buyer.address_email" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="eBay User Name">
              <el-input v-model="info.buyer" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="电话号码">
              <el-input :value="info.buyer.address_phone" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="36">
          <el-col :span="6" :offset="0">
            <el-form-item label="邮编">
              <el-input :value="info.buyer.address_postalcode" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="国家">
              <el-input v-model="info.buyer.address_country_name" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="州/省">
              <el-input v-model="info.buyer.address_stateorprovince" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="街道1">
              <el-input :value="info.buyer.address_street1" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="36">
          <el-col :span="6" :offset="0">
            <el-form-item label="街道2">
              <el-input :value="info.buyer.address_street2" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="街道3">
              <el-input :value="info.buyer.address_street3" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="header_title_box">
        <h2>商品信息</h2>
      </div>
      <div v-loading="loading">
        <el-table :data="product" border fit>
          <el-table-column label="缩略图" align="center" prop="goods_pic" width="190">
            <template slot-scope="scope">
              <thund :img="scope.row.goods_pic | shopThund" />
            </template>
          </el-table-column>
          <el-table-column label="商品名称" align="center" prop="goods_name" width="125" />
          <el-table-column label="英文名称" align="center" prop="goods_name_en" width="125" />
          <el-table-column label="系统sku" align="center" prop="goods_code" width="125" />
          <el-table-column label="所属客户" align="center" prop="company_name" width="125" />
          <el-table-column label="单价" align="center" prop="transaction_price_value" width="125" />
          <el-table-column label="币别" align="center" prop="transaction_price_currencyid" width="125" />
          <el-table-column label="数量" align="center" prop="number" width="125" />
          <el-table-column label="基础物流费" align="center" prop="basics_fee" width="125" />
          <el-table-column label="燃油费" align="center" prop="fuel_surchage" width="125" />
          <el-table-column label="额外处理费" align="center" prop="AHS" width="125" />
          <el-table-column label="超大超尺寸费" align="center" prop="oversize_charge" width="125" />
          <el-table-column label="地址修正费" align="center" prop="address_correction" width="125" />
          <el-table-column label="签名签收费" align="center" prop="direct_signature" width="125" />
          <el-table-column label="偏远地区附加费" align="center" prop="DAS_comm" width="125" />
          <el-table-column label="超偏远地区附加费" align="center" prop="DAS_extended_comm" width="125" />
          <el-table-column label="住宅地址附加费" align="center" prop="residential_delivery" width="125" />
          <el-table-column label="Unauthorized" align="center" prop="unauthorized_OS" width="125" />
          <el-table-column label="原件退回" align="center" prop="return_pickup_fee" width="125" />
          <el-table-column label="合计" align="center" prop="total_fee" width="125" />
        </el-table>
      </div>
    </el-form>

    <div class="dialog-footer-center">
      <span>
        <el-button type="primary" @click="handleCancel">返回</el-button>
      </span>
    </div>
  </div>
</template>

<script>
import thund from '../../../../components/base/thund'
export default {
  name: 'OrderFeeInfo',
  components: {
    thund
  },
  filters: {
    dicValue(val, key) {
      const dictionaries = {
        status: {
          1: '待发货',
          2: '已发货',
          3: '运输中',
          4: '配送中',
          5: '已收货',
          6: '作废订单'
        }
      }
      return dictionaries[key][val]
    }
  },
  data() {
    return {
      id: '', // id
      info: {}, // 详情,
      product: []
    }
  },
  created() {
    const vm = this
    vm.id = vm.$route.params.id
    vm.getInfo()
  },
  methods: {
    // 获取详情
    getInfo() {
      const vm = this
      vm.loading = true
      vm.$http
        .get(`/settlement/order-fee-info/${vm.id}`)
        .then((res) => {
          vm.info = res.data
          vm.product = [res.data.product]
          vm.loading = false
        })
        .catch(() => {
          vm.loading = false
        })
    },
    handleCancel() {
      const vm = this
      vm.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped></style>
